<template>
  <div>
    <Header ref="header"></Header>
    <div class="container layout layout-margin-top">
      <div class="row">
        <!--        课程-->
        <div class="col-md-9 layout-body">
          <!--          标签, 类别-->
          <div class="content">
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">类别：</div>
              <div class="col-md-11 course-cates-content">
                <a :class="{active:fee==''}" @click="fee=''">全部</a>
                <a :class="{active:fee==1}" @click="fee=1">免费</a>
                <a :class="{active:fee==2}" @click="fee=2">限免</a>
                <a :class="{active:fee==3}" @click="fee=3">会员</a>

              </div>
            </div>
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">标签：</div>
              <div class="col-md-11 course-cates-content">
                <a :class="{active:tag==''}" @click="tag=''">全部</a>

                <a :class="{active:tag==i.id}" v-for="i in tags" :key="i.id" @click="tag=i.id">{{i.title}}</a>

              </div>
            </div>
          </div>
          <!--          课程列表-->
          <div class="content position-relative">
            <ul class="nav nav-tabs" role="tablist">
              <li :class="{active:status==1}"><a @click="status=1">已上线</a></li>
              <li :class="{active:status==2}"><a @click="status=2">即将上线</a></li>
            </ul>
            <div class="clearfix"></div>
            <div class="courses-sort">
              <a :class="{active:ordering=='-pub_time'}" @click="ordering='-pub_time'">最新</a>
              /
              <a :class="{active:ordering=='-study_num'}" @click="ordering='-study_num'">最热</a>
            </div>
            <div class="search-result"></div>
            <div class="row">
              <template v-for="course in courses">
                <Course :course="course" width="33.33"></Course>
              </template>
            </div>

            <div style="text-align: center">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="count"
                @current-change="change_page"
              >
              </el-pagination>
            </div>


          </div>

        </div>
        <!--        侧边-->
        <div class="col-md-3 layout-side">


          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                      <img class="circle" src="/static/img/logo-grey.png">
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn"
                     data-toggle="modal" data-sign="signin" @click="login('login')">登录</a>
                  <a href="#sign-modal" type="button"
                     class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn" data-toggle="modal"
                     data-sign="signup" @click="login('register')">注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a href="#sign-modal" data-toggle="modal" data-sign="signin"><span
                    class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form id="private-course-form" method="POST" action="/courses/join">
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input class="form-control" id="code" name="code" type="text" value="">
                            <input name="_csrf_token" type=hidden
                                   value="1483780974##87f89328c5616669f00302a263fe9061bb852818">
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                                onclick="document.getElementById('private-course-form').submit();">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <HotPaths></HotPaths>
          <div class="side-image side-qrcode">
            <img src="/static/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>
    <Footer ref="footer"></Footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import Course from '@/components/Course'
  import HotPaths from '@/components/HotPaths'

  export default {
    components: {Header, Footer, Course, HotPaths},
    data() {
      return {
        fee: '', // 收费类型,0:全部 =>'', 1:免费,2:限免,3:vip
        tag: '', // 标签类型,0:全部=>'', python c/c++, ...
        status: '1', // 上线类型, 1:已上线, 2:即将上线
        ordering: '-pub_time', // 排序类型 最新:-pub_time, 最热:-study_num
        count: 0, // 过滤到的课程总数
        size: 3, // 每页显示的条数
        page: 1, // 保存当前页码
        tags: [], // 保存所有的标签, 这个需要从后端获取
        courses: [] // 保存所有的课程
      }
    },
    created() {
      this.fee = this.$route.query.fee || ''
      this.tag = this.$route.query.tag || ''
      this.status = this.$route.query.status || '1'
      this.get_tags()
      this.get_courses()
    },
    methods: {
      get_tags() {
        this.axios.get('/tag/').then(res => {
          debugger
          this.tags = res.data
        })
      },
      get_courses() {
        // /couse/?fee=1&tag=1&status=1&ordering=-pub_time&page=2
        this.axios.get('/course/', {
          params: {
            fee: this.fee,
            tag: this.tag,
            status: this.status,
            ordering: this.ordering,
            page: this.page
          }
        }).then(res => {
          // debugger
          this.count = res.data.count
          this.courses = res.data.results
        })
      },
      change_page(page_num) {
        // debugger
        this.page = page_num
        this.get_courses()
      },
      login(type) {
        // 设置header里的变量
        //show_modal: false,  // true
        //type: 'login',  // 'register'
        // this.$refs.header.type = type
        // this.$refs.header.show_modal = true
        this.$refs.header.show(type)

      },

    },
    watch: {
      fee(new_v, old_v) {
        this.get_courses()
      },
      tag(new_v, old_v) {
        this.get_courses()
      },
      status(new_v, old_v) {
        this.get_courses()
      },
      ordering(new_v, old_v) {
        this.get_courses()
      },
    }
  }
</script>

<style scoped>

</style>